<template>
  <div class="box">
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="add-item-box">
      <div class="add-item-step">
        <el-steps :active="active">
          <el-step title="商品分类"></el-step>
          <el-step title="商品信息"></el-step>
          <el-step title="商品规格"></el-step>
        </el-steps>
      </div>
      <div class="add-item-content">
        <div class="add-item-content-item" v-if="active==1">
          <el-scrollbar style="height:100%">
            <div class="add-item-select-box">
              <span>栏目：</span>
              <el-select v-model="columnChildList" placeholder="选择一级栏目" @change="columnChange">
                <el-option
                    v-for="item in columnList"
                    :label="item.ccname"
                    :value="item.columnList"
                >
                </el-option>
              </el-select>
              <el-select v-model="item.itemColumn" placeholder="选择二级栏目">
                <el-option
                    v-for="item in columnChildList"
                    :label="item.ccname"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="add-item-select-box">
              <span>场景：</span>
              <el-select v-model="sceneChildList" placeholder="选择一级场景" @change="sceneChange">
                <el-option
                    v-for="item in sceneList"
                    :label="item.scenarioTitle"
                    :value="item.sceneChildList"
                >
                </el-option>
              </el-select>
              <el-select v-model="item.itemScene" placeholder="选择二级场景">
                <el-option
                    v-for="item in sceneChildList"
                    :label="item.scenarioTitle"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="add-item-select-box">
              <span>年龄：</span>
              <el-select v-model="ageMinutes" placeholder="选择年龄段" @change="ageChange">
                <el-option
                    v-for="item in ageList"
                    :label="item.agegroup"
                    :value="item.ageMinutes"
                >
                </el-option>
              </el-select>
              <el-select v-model="agePoints" placeholder="选择商品一级类别" @change="ageMinutesChange">
                <el-option
                    v-for="item in ageMinutes"
                    :label="item.agegroup"
                    :value="item.agePoints"
                >
                </el-option>
              </el-select>
              <el-select v-model="item.itemAge" placeholder="选择商品二级类别">
                <el-option
                    v-for="item in agePoints"
                    :label="item.agegroup"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div class="add-item-select-box">
              <span>分类：</span>
              <el-select v-model="categoryChildList" placeholder="选择一级分类" @change="categoryChange">
                <el-option
                    v-for="item in categoryList"
                    :label="item.name"
                    :value="item.categoryList"
                >
                </el-option>
              </el-select>
              <el-select v-model="item.itemCategory" placeholder="选择二级分类">
                <el-option
                    v-for="item in categoryChildList"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </el-scrollbar>
        </div>
        <div class="add-item-content-item" v-if="active==2">
          <el-scrollbar style="height:100%">
            <el-form :model="item" label-width="80px">
              <el-form-item label="商品名称">
                <el-input v-model="item.itemName" placeholder="输入商品名称"></el-input>
              </el-form-item>

              <el-form-item label="商品品牌">
                <el-select v-model="item.itemBrandId" placeholder="选择商品品牌">
                  <el-option
                      v-for="item in brandList"
                      :label="item.brandName"
                      :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="商品介绍">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="商品介绍"
                    v-model="item.itemIntroduction">
                </el-input>
              </el-form-item>

              <el-form-item label="商品图片">
                <el-upload
                    class="upload-demo"
                    action=""
                    :on-change="fileDataList"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :limit="6"
                    :on-exceed="handleExceed"
                    :file-list="imgList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
              </el-form-item>

              <el-form-item label="物流类型">
                <el-radio-group v-model="item.itemLogisticsType">
                  <el-radio :label="1">普通物流</el-radio>
                  <el-radio :label="2">国外直邮</el-radio>
                  <el-radio :label="3">门店自提</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="保质期">
                <el-date-picker
                    v-model="item.itemShelfLife"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="库存预警">
                <el-input-number v-model="item.itemInventoryWarning" :min="1" :max="10" label="库存预警"></el-input-number>
              </el-form-item>

              <el-form-item label="计量单位">
                <el-input v-model="item.itemUnitOfMeasurement" placeholder="计量单位"></el-input>
              </el-form-item>

              <el-form-item label="商品货号">
                <el-input v-model="item.itemCode" placeholder="商品货号"></el-input>
              </el-form-item>

              <el-form-item label="商品售价">
                <el-input v-model="item.itemSellingPrice" placeholder="商品售价"></el-input>
              </el-form-item>

              <el-form-item label="市场价">
                <el-input v-model="item.itemMarketPrice" placeholder="市场价"></el-input>
              </el-form-item>

              <el-form-item label="服务保障">
                <el-radio-group v-model="item.itemServiceAssurance">
                  <el-radio :label="1">七天无理由退换</el-radio>
                  <el-radio :label="2">免费包邮</el-radio>
                  <el-radio :label="3">包税</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="积分奖励">
                <el-input v-model="item.itemPeoplePoints" placeholder="积分奖励"></el-input>
              </el-form-item>

              <el-form-item label="是否下架">
                <el-radio-group v-model="item.status">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>

          </el-scrollbar>
        </div>
        <div class="add-item-content-item" v-if="active==3">
          <div class="add-guige-button">
            <el-button type="primary" style="float: right" @click="addGuiGe">添加规格</el-button>
          </div>
          <el-scrollbar style="height:85%">
            <div class="guige-item" v-for="specification in item.itemSpecificationList">
              <div class="guige-item-index">
                <el-form label-width="80px">
                  <el-form-item label="规格名">
                    <el-input v-model="specification.itemSpecificationName" placeholder="规格名"
                              style="width: 200px"></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <div class="guige-item-index">
                <el-form label-width="80px">
                  <el-form-item label="规格值">
                    <el-input v-model="specification.itemSpecificationValueList[index]" placeholder="规格值"
                              style="width: 100px"
                              v-for="(s,index) in specification.itemSpecificationValueList"></el-input>
                    <el-button @click="addGuiGeV(specification.itemSpecificationValueList)"><i class="el-icon-circle-plus-outline"></i></el-button>
                  </el-form-item>

                </el-form>
              </div>
            </div>
            <el-button type="primary" :loading="loading" @click="shengchengguige">生成</el-button>
            <div class="guige-table" v-if="specificationList!=null">
              <el-table
                  :data="specificationList"
                  style="width: 100%">
                <el-table-column
                    label="规格编码"
                    prop="scode"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="规格"
                    prop="specification"
                    width="180">
                </el-table-column>
                <el-table-column
                    label="价格">
                  <template slot-scope="s">
                    <el-input v-model="s.row.itemPrice" placeholder="价格"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                    label="库存">
                  <template slot-scope="s">
                    <el-input v-model="s.row.itemRepertoryNum" placeholder="库存数量"></el-input>

                  </template>
                </el-table-column>
                <el-table-column
                    label="库存">
                  <template slot-scope="s">
                    <el-button type="danger" icon="el-icon-delete" circle @click="delSpecification(s.$index)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-scrollbar>
        </div>
        <div class="next-button">
          <el-button @click="nextStep" v-if="active!=3">下一步</el-button>
          <el-button type="primary" v-if="active==3" @click="logItem">添加</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1,
      columnList: null,
      columnChildList: null,
      sceneList: null,
      sceneChildList: null,
      ageList: null,
      ageMinutes: null,
      agePoints: null,
      categoryList: null,
      categoryChildList: null,
      brandList: null,
      imgList: [],
      fileList: [],
      loading:false,
      specificationList:null,
      item: {
        itemColumn: null,
        itemScene: null,
        itemAge: null,
        itemCategory: null,
        itemSpecificationList: [
          {
            itemSpecificationName: "",
            itemSpecificationValueList: [
              "",
              "",
              ""
            ]
          }
        ],
        specificationList:null
      }
    }
  },
  methods: {
    loadData() {
      this.$axios({
        method: "get",
        url: "/Column/findOneColumn",
      }).then(res => {
        if (res.data.code == 200) {
          this.columnList = res.data.data
        }
      })

      this.$axios({
        method: "get",
        url: "scene/getAllScene",
      }).then(res => {
        if (res.data.code == 200) {
          this.sceneList = res.data.data
        }
      })
      this.$axios({
        method: "get",
        url: "age/agelimit",
      }).then(res => {
        if (res.data.code == 200) {
          this.ageList = res.data.data
        }
      })
      this.$axios({
        method: "get",
        url: "category/getAllCategory1",
      }).then(res => {
        if (res.data.code == 200) {
          this.categoryList = res.data.data
        }
      })

      this.$axios({
        method: "get",
        url: "brand/getAllBrand",
      }).then(res => {
        if (res.data.code == 200) {
          this.brandList = res.data.data
        }
      })
    },
    shengchengguige(){
        this.loading = true
        this.$axios({
          url:"scene/shengchengguige",
          method:"post",
          data:this.item.itemSpecificationList
        }).then(res=>{
          if (res.data.code==200){
            this.loading = false
            this.specificationList = res.data.data
          }
        })

    },
    columnChange() {
      this.item.itemColumn = null
    },
    sceneChange() {
      this.item.itemScene = null
    },
    ageChange() {
      this.agePoints = null
      this.item.itemAge = null
    },
    ageMinutesChange() {
      this.item.itemAge = null
    },
    categoryChange() {
      this.item.itemCategory = null
    },
    nextStep() {
      this.active++
    },
    fileDataList(file, fileList) {
      this.imgList.push({name: file.name, url: URL.createObjectURL(file.raw)})
      this.fileList.push(file.raw)
      // this.fileList = fileList
      // console.log("file")
      // console.log(this.fileList)
    },
    handleRemove(file, fileList) {
      this.imgList = fileList
      // console.log(fileList)
      // console.log(this.fileList)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多上传6个`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    addGuiGe() {
      this.item.itemSpecificationList.push(
          {
            itemSpecificationName: "",
            itemSpecificationValueList: [
              "",
              "",
              ""
            ]
          })
    },
    addGuiGeV(itemSpecificationValueList){
      itemSpecificationValueList.push("")
    },
    logItem(){
      if (this.specificationList!=null){
        this.item.specificationList = this.specificationList
      }
      this.$axios({
        url:"scene/addItem",
        method:"post",
        data:this.item
      }).then(res=>{
        if (res.data.code==200){
          let formData = new FormData();
          this.fileList.forEach(item => {
            formData.append("files", item);
          });
          formData.append("itemId",res.data.data.itemId)
          this.$axios({
            url:"scene/addItemImg",
            method:"post",
            data:formData,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res=>{
            if (res.data.code == 200){
              this.$message({
                type: 'success',
                message: '添加商品成功!'
              });
              this.$router.push("/Item")
            }
          })
        }
      })
    },
    
    delSpecification(index){
      this.$confirm('确定要删除该规格', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        this.specificationList.splice(index,1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style>
.box {
  width: 100%;
  height: 80vh;
  background: #eeeeee;
}

.mianbaoxie {
  width: 95%;
  height: 8vh;
  margin: 0 auto;
}

.add-item-box {
  width: 95%;
  height: 70vh;
  margin: 0 auto;
  background: #FFFFFF;
  box-shadow: 1px 4px 12px #000;
  overflow: hidden;
}

.add-item-step {
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
}

.add-item-content {
  width: 80%;
  height: 70vh;
  margin: 0 auto;
}

.add-item-content-item {
  width: 80%;
  height: 50vh;
  margin: 0 auto;
}

.add-item-select-box {
  width: 90%;
  margin-left: 50px;
  margin-bottom: 20px;
}

.next-button {
  width: 100px;
  height: 5vh;
  margin: 0 auto;
}

.add-guige-button {
  width: 100%;
  height: 15%;
}

.guige-item {
  width: 100%;
  height: 100px;
  border: 1px dashed #8c939d;
  margin-bottom: 5px;
}

.guige-item-index {
  width: 100%;
  height: 50px;
}
.guige-table{
  width: 100%;
}
</style>